<%--
  Created by IntelliJ IDEA.
  User: 郝大哥
  Date: 2021/11/29
  Time: 10:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 百度ECHarts</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="<%=request.getContextPath()%>/resource/favicon.ico"> <link href="<%=request.getContextPath()%>/resource/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/resource/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="<%=request.getContextPath()%>/resource/css/animate.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/resource/css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="form-group">
    <div class="input-group">
        <select data-placeholder="选择省份..." class="chosen-select" style="width:200px;height: 30px;margin-top: 25px;margin-left: 25px" tabindex="2" id="ser">
            <option value="">请选择省份</option>
            <option value="北京" hassubinfo="true">北京</option>
            <option value="天津" hassubinfo="true">天津</option>
            <option value="河北" hassubinfo="true">河北省</option>
            <option value="山西" hassubinfo="true">山西省</option>
            <option value="内蒙古" hassubinfo="true">内蒙古自治区</option>
            <option value="辽宁" hassubinfo="true">辽宁省</option>
            <option value="吉林" hassubinfo="true">吉林省</option>
            <option value="黑龙江" hassubinfo="true">黑龙江省</option>
            <option value="上海" hassubinfo="true">上海</option>
            <option value="江苏" hassubinfo="true">江苏省</option>
            <option value="浙江" hassubinfo="true">浙江省</option>
            <option value="安徽" hassubinfo="true">安徽省</option>
            <option value="福建" hassubinfo="true">福建省</option>
            <option value="江西" hassubinfo="true">江西省</option>
            <option value="山东" hassubinfo="true">山东省</option>
            <option value="河南" hassubinfo="true">河南省</option>
            <option value="湖北" hassubinfo="true">湖北省</option>
            <option value="湖南" hassubinfo="true">湖南省</option>
            <option value="广东" hassubinfo="true">广东省</option>
            <option value="广西" hassubinfo="true">广西壮族自治区</option>
            <option value="海南" hassubinfo="true">海南省</option>
            <option value="重庆" hassubinfo="true">重庆</option>
            <option value="四川" hassubinfo="true">四川省</option>
            <option value="贵州" hassubinfo="true">贵州省</option>
            <option value="云南" hassubinfo="true">云南省</option>
            <option value="西藏" hassubinfo="true">西藏自治区</option>
            <option value="陕西" hassubinfo="true">陕西省</option>
            <option value="甘肃" hassubinfo="true">甘肃省</option>
            <option value="青海" hassubinfo="true">青海省</option>
            <option value="宁夏" hassubinfo="true">宁夏回族自治区</option>
            <option value="新疆" hassubinfo="true">新疆维吾尔自治区</option>
            <option value="台湾" hassubinfo="true">台湾省</option>
            <option value="香港" hassubinfo="true">香港特别行政区</option>
            <option value="澳门" hassubinfo="true">澳门特别行政区</option>
        </select>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>中国疫情地图</h5>
                </div>
                <div class="ibox-content">
                    <div style="height:600px" id="echarts-map-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="<%=request.getContextPath()%>/resource/js/jquery.min.js?v=2.1.4"></script>
<script src="<%=request.getContextPath()%>/resource/js/bootstrap.min.js?v=3.3.6"></script>



<!-- ECharts -->
<script src="<%=request.getContextPath()%>/resource/js/plugins/echarts/echarts-all.js"></script>

<!-- 自定义js -->
<script src="<%=request.getContextPath()%>/resource/js/content.js?v=1.0.0"></script>
<script>
    $(function(){//页面加载的时候进行调用

        $("#ser").change(function(){
            var province=$("#ser").val();
            initProvince(province);
        })
        initProvince("");
    })
    function initProvince(province){
        if(province==""||province==null){
            province="山西";
        }
        $.ajax({
            url:"<%=request.getContextPath()%>/yq/getCity?province="+province,
            type:"get",
            dataType:"json",
            success:function(res){
                var conNum=[];//确诊 {name:..,value:...}
                var cureNum=[];//治愈
                var econNum=[];//未治愈
                var deathNum=[];//死亡
                for(var i=1;i<res.length;i++){
                    conNum.push({name:res[i].cityName,value:res[i].conNum});
                    cureNum.push({name:res[i].cityName,value:res[i].cureNum});
                    econNum.push({name:res[i].cityName,value:res[i].econNum});
                    deathNum.push({name:res[i].cityName,value:res[i].deathNum});
                }
                console.log(conNum)
                //1、绑定图表的div，初始化图表信息
                var myEcharts=echarts.init(document.getElementById("echarts-map-chart"));
                //2、设置图表的选项
                var option = {
                    title: {
                        text : res[0].provinceName,
                        subtext : '数据来源于新浪'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        x:'right',
                        data:['确诊','治愈','死亡','未治愈']
                    },
                    dataRange: {
                        min: 0,
                        max: 300,
                        color:['orange','yellow'],
                        text:['高','低'],           // 文本，默认为数值文本
                        calculable : true
                    },
                    series : [
                        {
                            name: '确诊',
                            type: 'map',
                            mapType: res[0].provinceName,
                            itemStyle:{
                                normal:{label:{show:true}},
                                emphasis:{label:{show:true}}
                            },
                            data:conNum
                        },
                        {
                            name: '治愈',
                            type: 'map',
                            mapType:res[0].provinceName,
                            selectedMode : 'single',
                            itemStyle:{
                                normal:{label:{show:true}},
                                emphasis:{label:{show:true}}
                            },
                            data:cureNum
                        },
                        {
                            name: '死亡',
                            type: 'map',
                            mapType: res[0].provinceName,
                            selectedMode : 'single',
                            itemStyle:{
                                normal:{label:{show:true}},
                                emphasis:{label:{show:true}}
                            },
                            data:deathNum
                        },
                        {
                            name: '未治愈',
                            type: 'map',
                            mapType: res[0].provinceName,
                            selectedMode : 'single',
                            itemStyle:{
                                normal:{label:{show:true}},
                                emphasis:{label:{show:true}}
                            },
                            data:econNum
                        }

                    ]
                };
                //3、加载图片选项
                myEcharts.setOption(option);
            }
        });
    }
</script>



</body>

</html>

